<template>
  <div class="com-container">
    <div class="com-chart" ref="jpph"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      chartInstance: null
    }
  },
  destroyed () {
    window.removeEventListener('resize', this.updataChart)
  },
  mounted () {
    this.initChart()
    this.updataChart()
    window.addEventListener('resize', this.updataChart)
    this.updataChart()
  },
  methods: {
  initChart () {
    this.chartInstance = this.$echarts.init(this.$refs.jpph)
  },
  updataChart () {
    const option = {
      backgroundColor: '#F5F5F5',
      title: {
        text: '非遗项目类型分布',
        subtext: '数据来源：中国非物质文化遗产网',
        x: 'center',
        y: '3%',
        textStyle: {
          fontFamily: 'sans-serif',
          fontSize: 22,
          fontWeight: 'normal'
        },
        subtextStyle: {
          color: '#646464',
          fontFamily: 'sans-serif',
          fontSize: 16,
          fontWeight: 'normal'
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 10,
        top: 'center',
        data: ['民间文学', '传统音乐', '传统舞蹈', '传统戏剧', '曲艺', '传统体育、游艺与杂技', '传统美术', '传统技艺', '传统医药', '民俗']
      },
      series: [
        {
          name: '项目数量',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: 'outside',
            formatter: '{b}: {c}'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '18',
              fontWeight: 'bold'
            }
          },
          data: [
            {value: 125, name: '民间文学'},
            {value: 185, name: '传统音乐'},
            {value: 156, name: '传统舞蹈'},
            {value: 142, name: '传统戏剧'},
            {value: 138, name: '曲艺'},
            {value: 124, name: '传统体育、游艺与杂技'},
            {value: 172, name: '传统美术'},
            {value: 287, name: '传统技艺'},
            {value: 98, name: '传统医药'},
            {value: 223, name: '民俗'}
          ]
        }
      ]
    }
    this.chartInstance.setOption(option)
    this.chartInstance.resize()
  }
 }
}

</script>

<style>

</style>
